{% extends "index.html" %}
{% block content %}
<div id="profileList">
    <div class="col-lg-12 main-div" id="set-div">
        <legend class="legend">
            <span>Profiles <span class="glyphicon glyphicon-refresh spinning loader"></span></span>
        </legend>
    </div>
        <div class="col-lg-12 mg-bottom15">
            <div class="form-group">
                <button id="buttonNewProfile" class="btn btn-success">
                        <span class="glyphicon glyphicon-plus-sign"> </span>
                         New Profile
                </button>
                <button class="btn btn-danger btn-delete_container mgright-5" id="buttonDeleteProfile" disabled>
                    <span class="glyphicon glyphicon-remove-sign" > </span> Delete <span class="glyphicon glyphicon-refresh spinning loader hidden"></span>
                </button>
                 <button class="btn btn-default btn-xs btn-rounded-corners rawJSONProfiles" href="#" style="display:none">
               JSON
            </button>
            </div>

        </div>
        <br>
        <br>
        <br>

        <div class="col-lg-12">
            <table class="table table-bordered width100" id="tableProfiles">
                <thead>
                <th><input type="checkbox" id="selectAllProfiles"/></th>
                <th>Name</th>
                <th>Description</th>
                <th>Profile</th>
                <th>Used by</th>
                <th>Action</th>

                </thead>
                <tbody>
                {% for profile in profiles %}
                <tr id="{{profile.name}}">
                    <td></td>
                    <td>{{profile.name}}</td>
                    <td>{{ profile.description }}</td>
                    <td>
                         {% for device in profile.devices %}
                        <ul>
                            <h5>{{device}}</h5>
                            {% for key, value in profile.devices[device].items() %}

                            <li>{{key}}: {{value}}</li>
                            {% endfor %}
                        </ul>
                         {% endfor %}
                        <ul>
                            {% for key, value in profile.config.items() %}

                            {{key}}: {{value}}<br>
                            {% endfor %}
                        </ul>
                    </td>
                    <td>
                     {% for used in profile.used_by %}
                        <li>{{used.split('/')[-1]}}</li>
                     {% endfor %}
                    </td>
                    <td>
                        <button class="btn btn-default" id="{{profile.name}}" name="updateProfile" onClick="$.proxy(App.profiles.showUpdateProfile('{{profile.name}}'));">
                            <span class="glyphicon"> </span> Update Profile
                        </button>
                    </td>

                </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>


<div id="newProfile" hidden>
    <div class="col-lg-12 main-div" id="set-div">
        <legend>Profiles <span class="glyphicon glyphicon-refresh spinning hidden"></span></legend>

        <div>
            <div class="form-group">
                <button id="backProfile" class="btn btn-default">
                        <span class="glyphicon glyphicon-chevron-left"> </span>
                         Back
                </button>
            </div>
        </div>


        <div class="col-lg-12">
            <form id="profileForm" class="form-horizontal">
                <div class="form-group">
                    <label for="name" class="col-sm-2 control-label profile-name">Profile Name</label>
                    <div class="col-sm-4">
                        <input id="name" name="name" class="form-control" type="text" placeholder="Profile Name" title="Profile Name" required/>
                    </div>
                </div>

                <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist" class="col-lg-6">
                <li class="active">
                    <a data-toggle="tab" href="#config" class="" role="tab">Config (JSON)</a>
                </li>
                <li>
                    <a data-toggle="tab" href="#devices" class="" role="tab">Devices (JSON)</a>
                </li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content">
                <div class="tab-pane active" id="config" role="tabpanel">
                    <div class="form-group width100">
                        <!--<div for="configEditor" class="col-sm-12" style="text-align: left; margin-left: 40px; margin-bottom: 10px;"></div>-->
                        <div class="col-sm-12">
                            <div id="configEditor"></div>
                        </div>
                    </div>
                </div>

                <div class="tab-pane" id="devices" role="tabpanel">
                    <div class="form-group width100">
                        <!--<div for="devicesEditor" class="col-sm-12 control-label" style="text-align: left; margin-left: 40px; margin-bottom: 10px;"></div>-->
                        <div class="col-sm-12">
                            <div id="devicesEditor" name="devicesEditor"></div>
                        </div>
                    </div>
                </div>
            </div>

                <div class="form-group">
                    <div class="form-inline col-md-12 mgtop-10">
                        <button id="buttonCreateProfile" class="btn btn-primary">Create Profile <span class="glyphicon glyphicon-refresh spinning hidden"></span></button>
                        <button id="buttonUpdateProfile" class="btn btn-primary">Update Profile <span class="glyphicon glyphicon-refresh spinning hidden"></span></button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</div>
{% endblock %}